<template>
    <div>
        <div class="title_window" >
        <div style="color:#fff;min-width:40px;position: absolute;left: 10px;top: 5px;">选择{{tip}}</div>
        <div class="buttonBox">
            <!-- <div class="conBox" style="margin-right:10px"> -->
            <!-- <div class="titlebar-min" @click="minimize">
                <svg  xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-dash" viewBox="0 0 16 16">
                <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
                </svg>
                </div>
            </div> -->
            <div class="conBox" style="margin-right:10px">
            <div class="titlebar-close" @click="closeW">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
                <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                </svg>
            </div>
            </div>
        </div>
        </div>
        <div class="liveBox">
            <div class="live">
                <div class="DDone" v-for="i in LivwRoom" :key="i.id" @click="act(i)">
                    <img class="Imgs" :src='i.background' alt="" srcset="" draggable="false">
                    <template v-for="(c,index) in activeAreey" :key="index">
                      <div class="fl" v-show="i.room_id == c"><span>{{index+1}}</span></div>
                    </template>
                    <span class="fname">{{i.name}}</span>
                </div>
            </div>
            <div class="act">
              <button class="button" @click="artY">确认选择</button>
              <span>TIP:选中后再次点击取消选择</span><br>
              <!-- <span>当前应用分辨率为800*450，仅能播放4个副监控，如需更多请前往<span style="color:red;">直播间设置</span>更改分辨率</span> -->
            </div>
        </div>
        <!--  -->
        <span class="Num" :class="{activeN: isNum}">已超过最大监控数</span>
    </div>
</template>
<script setup>
import { ref,onMounted } from "vue";
import { useRouter } from 'vue-router'
const { ipcRenderer } = require('electron')
const fs = require('fs')
const https = require('https');
const request = require('request')

const LivwRoom = ref([])
// const css = [{"uid": "3493087865210994", "title": "小鹿惹人爱~", "name": "赖赖真不赖呢", "background": "27271416Live.jpg", "live_status": 1}, 
// {"uid": "3537107402361230", "title": "是你喜欢的富婆吗？", "name": "筱小汐丶提督冠名", "background": "30422429Live.jpg", "live_status": 1}, 
// {"uid": "3493270858500935", "title": "不许嚼我！", "name": "冰冰冰块", "background": "27570664Live.jpg", "live_status": 1}, {
//     "uid": "3493272586553445", "title": "可爱小猫在线营业", "name": "小雨酱紫ovo", "background": "27510102Live.jpg", "live_status": 1}, 
//     {"uid": "3493294298368276", "title": "【新v】没有姐的地方是寂寞~", "name": "小桃汽_taotao", "background": "30758927Live.jpg", "live_status": 1}]

const activeAreey = ref([])
const is = ref(false)
//选择数量
const isNum = ref(false)
let timer = null
//图片处理状态
const imgL = ref(true)
//标志
const tip = ref('')

function closeW() {
  ipcRenderer.send('window-closeF')
}

onMounted(()=>{
  ipcRenderer.send("getPath")
  ipcRenderer.on('dataname', (event, arg) => {  tip.value = arg})
  // loadImg(css)
  ipcRenderer.on('AppPath', (event, message) =>{
    fs.readFile(message+'\\LiveImg\\Config.txt','utf8',function(err,dataStr){
      let data = JSON.parse(dataStr)
      // console.log(data.room.RL)
      getZB(data.room.RL.split(','))
    })
  })
})

function loadImg(item) {
    item.forEach(element => {
      Img(element)
    });

}
//node加载本地图片并写入json
function Img(params) {
    fs.readFile('./LiveImg/'+params['background'], function (err, data) {
    if (err) {
            console.log(err);
        } else {
        // base64图片编码字符串
        // imgSrcList.push("data:image/jpg;base64," + data.toString('base64'));
            LivwRoom.value.push({uid:params.uid,name:params.name,title:params.title,background:"data:image/jpg;base64," + data.toString('base64'),live_status:params.live_status})
        }
    })
}
//选中
function act(sele) {
  if(activeAreey.value.length>0){
      for (let index = 0; index < activeAreey.value.length; index++) {
        const element = activeAreey.value[index];
        // console.log(index,'ac',activeAreey.value[index],'sele',sele.uid)
          // if(activeAreey.value[index] == sele.uid){
            if(activeAreey.value[index] == sele.room_id){
              activeAreey.value.splice(index,1)
              is.value = true
              break
            }else{
              is.value = false
            }
          // }
      }
      if (!is.value) {
        activeAreey.value.push(sele.room_id)
      }else{
        if (!is.value) {
          if (!timer) {
              if(timer == null){
                isNum.value = true
                timer = setTimeout(() => {
                    clearTimeout(timer)
                    isNum.value = false
                    timer = null
                }, 1500);
            }
          }
        }
      }
  }else{
    activeAreey.value.push(sele.room_id)
  }
}
//确认选择
function artY() {
  // console.log(activeAreey.value)

  ipcRenderer.send('window-closeF',JSON.parse(JSON.stringify(activeAreey.value)))

}


//主播信息请求
async function getZB(room_id) {
    room_id.forEach(ele => {
        let room_url = 'https://api.live.bilibili.com/xlive/web-room/v1/index/getRoomBaseInfo?room_ids='+ele+'&req_biz=video'
        httpGet(room_url,ele)
    });
}
//get请求
function httpGet(room_url,ele) {
    https.get(room_url,(res)=>{
        let data = ''
        res.setEncoding('utf8');
        res.on('data',(chunk)=>{
            data +=chunk
        })
        res.on('end',()=>{
            let backMsg = JSON.parse(data).data.by_room_ids[ele]
            downImg(backMsg.cover,backMsg,ele)
            // console.log(JSON.parse(data).data.by_room_ids[ele])
        })
    })
}
//判断主播图片文件夹是否存在
async function pathY() {
    let ispath = fs.statSync(pathOne.value+'\\LiveImg')
    if (ispath) {
        console.log('存在')
    }else{
        fs.mkdirSync(pathOne.value+'\\LiveImg',function(error){

        })
    }
}
//下载主播图片并保存
function downImg(img_url,data,eles) {
    request({
    url: img_url,
    encoding: null,
    method: "GET",
    headers: {
        "content-type": "application/json"
    },
    }, function(error, response, body) {
        if (!error && response.statusCode == 200) {
            let base64Img = body.toString('base64');
            let imageOne = "data:image/jpg;base64," + base64Img

            LivwRoom.value.push({room_id:eles,name:data.uname,uid:data.uid,background:imageOne,isN:true})
            // console.log(data)
        }else{
            console.log('直播间封面异常',data)
            
        }
    })
}
</script>
<style scoped>
.activeN{
  bottom: 10px !important;
}
.Num{
  padding: 10px 15px;
  position: fixed;
  bottom: -50px;
  left: 35%;
  background-color: cornflowerblue;
  border-radius: 2px;
  color: #fff;
  transition: all 0.5s;
}
.fl{
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 20px;
  padding: 0 10px;
  background-color: rgb(250, 131, 151);
}
.button{
  border-radius: 2px;
  border: none;
  padding: 5px 10px;
  font-family: myFont;
  max-width: 100px;
  margin: 10px 0;
  cursor: pointer;
  background-color: rgb(255, 0, 106);
  color: #fff;
}
.act{
  width: 20%;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.liveBox{
  display:flex;
  width: 100%;
}
.live{
  display: flex;
  width: 80%;
  flex-wrap: wrap;
  max-height: 320px;
  height: 100%;
  overflow: auto;
  flex-direction: row;
  justify-content: flex-start;
}
.DDone{
    padding: 5px 5px 0 5px;
    position: relative;
    color: #fff;
    height: 90px;
}
.Imgs{
    width: 140px;
    height: 80px;
    border-radius: 4px;
    border:2px solid transparent;
}
.fname{
    position: absolute;
    left: 10px;
    top: 55px;
    color: rgb(255, 60, 190);
}









.title_window{
  width: 100%;
  height: 30px;
  -webkit-app-region: drag;
  position: relative;
  /* user-select: none; */
  display: flex;
  justify-content: space-between;
  background-color: #454e5d;
  z-index: 99;
}
.buttonBox{
  width: 100%;
  height: 30px;
  display: flex;
  -webkit-app-region: drag;
  justify-content: flex-end;
}
.titlebar-close {
  width: 21px;
  height: 21px;
  color: #454e5d !important;
  background: #faf6f3;
  -webkit-app-region: no-drag;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  border-radius: 50%;
}

.titlebar-min {
  width: 21px;
  height: 21px;
  color: #454e5d !important;
  background: #faf6f3;
  -webkit-app-region: no-drag;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  border-radius: 50%;
}
.conBox{
  background: #ffffff60;width:25px;height:25px;border-radius: 50%;display:flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  margin:auto 1px;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.live::-webkit-scrollbar,.LiveList::-webkit-scrollbar  {
    width: 0px;
    height: 6px
}
/*定义滚动条轨道*/
.live::-webkit-scrollbar-track,.LiveList::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}
/*定义滑块 内阴影+圆角*/
.live::-webkit-scrollbar-thumb,.LiveList::-webkit-scrollbar-thumb {
    background-color: #30B07F00;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0) 100%,transparent 100%,transparent 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 75%,transparent 75%,transparent);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}
</style>